<template>
  <div class="wrapper">
    <h3>通 知 公 告</h3>
    <el-table
      ref="noticeTable"
      :data="noticeList"
      highlight-current-row
      :show-header="false"
      :cell-style="cellStyle"
      @current-change="handleSelect">
      <el-table-column property="title" width="800"></el-table-column>
      <el-table-column property="createTime"></el-table-column>
    </el-table>
    <div style="display: flex; justify-content: flex-end; margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="pageSizes"
        :page-size="size"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
    export default {
        name: "NoticeList",
        data(){
            return{
                noticeList: [],
                current: 1,
                pageSizes: [10,20,30,40],
                size: 10,
                total: 0
            }
        },
        methods: {
            loadNoticeList(current, size){
                this.getRequest('/getNoticeList', {current: current, size: size}).then(resp=>{
                    if (resp){
                        this.current=resp.current;
                        this.size=resp.size;
                        this.total=resp.total;
                        this.noticeList=resp.list;
                        for(let i=0;i< resp.list.length;i++){
                            this.noticeList[i].createTime=resp.list[i].createTime.substring(0,10);
                        }
                    }else{
                        console.log('获取通知列表失败');
                    }
                })
            },
            handleCurrentChange(val){
                this.loadNoticeList(val, this.size);
            },
            handleSizeChange(val){
                this.loadNoticeList(this.current, val);
            },
            handleSelect(val){
                this.$router.push({
                    path: '/noticeDetails',
                    query: {
                        noticeId: val.noticeId
                    }
                });
            },
            cellStyle(){
                return 'cursor: pointer';
            }
        },
        mounted() {
            this.loadNoticeList(1,10);
        }
    }
</script>

<style scoped>
  .wrapper{
    padding-left: 5%;
  }
  .el-table{
    margin-top: 10px;
  }

  h3{
    padding-left: 2%;
  }

</style>
